const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      // { test: /\.css$/, use: ["style-loader", { loader: "css-loader" }] }, // 多个loader, 并且loader中需要传递参数
      // { test: /\.css$/, use: "css-loader" }, // 一个loader时
      // { test: /\.css$/, use: ["style-loader", "css-loader"] }, // 多个loader时
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          /* {  // 使用单独文件配置
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
              },
            },
          }, */
        ],
      }, // 多个loader时
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader",
          "postcss-loader",
          /* {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
              },
            },
          }, */
        ],
      },
    ],
  },
};
